<!doctype html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<head>
<title>Color Cube Image Maker</title>
<style>
body, html {
  background-color: black;
  color: white;
  font-family: monospace;
}
.caption {
  font-size: x-small;
}
input {
  background-color: #444;
  color: white;
  border: 1px solid #888;
}
</style>
<script>
window.onload = main;

function $(id) {
  return document.getElementById(id);
}

function main() {
  $("size").addEventListener('change', handleSizeChange, true);
  drawColorCubeImage(8);
}

function handleSizeChange(event) {
  try {
    var size = parseInt(event.target.value);
    if (size >= 2 && size <= 64) {
      drawColorCubeImage(size);
    }
  } catch (e) {
  }
}

function drawColorCubeImage(size) {
  var canvas = document.createElement("canvas");
  canvas.width = size * size;
  canvas.height = size;
  var ctx = canvas.getContext("2d");
  for (var zz = 0; zz < size; ++zz) {
    for (var yy = 0; yy < size; ++yy) {
      for (var xx = 0; xx < size; ++xx) {
        var r = Math.floor(xx / (size - 1) * 255);
        var g = Math.floor(yy / (size - 1) * 255);
        var b = Math.floor(zz / (size - 1) * 255);
        ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
        ctx.fillRect(zz * size + xx, yy, 1, 1);
      }
    }
  }
  var img = $("cube");
  img.src = canvas.toDataURL();
  img.style.width = (size * 5 * size).toString() + "px";
  img.style.height = (size * 5).toString() + "px"
  $("width").innerHTML = canvas.width;
  $("height").innerHTML = canvas.height;
}
</script>
</head>
<body>
<h1>Color Cube Image Maker</h1>
<div>size:<input id="size" type="text" value="8"/></div>
<p>Right click on the image below and pick "Save Image As..."</p>
<p><img id="cube" /></br>
<div class="caption">( note: actual image size is
<span id="width"></span>x<span id="height"></span> )</div>
</p>
</body>
</html>
